<div id="main">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{:lang('setting_employee_permission')}</h4>
    </div>
    <div class="modal-body">
            <div class="row clearfix">
                    <div class="col-md-12 column">
                        <div class="alert alert-dismissable alert-info">
                            <button type="button" class="close">×</button>
                            <p></p>
                        </div>
                    </div>
                </div>
        <table class="table" v-cloak>
                <colgroup>
                    <col width="200">
                  </colgroup>
            <tbody>
            <tr>
                <td>{:lang('nickname')}</td>
                <td>{{nickname}}</td>
            </tr>
            <tr>
                <td>{:lang('department')}</td>
                <td> {{framname}}</td>
            </tr>
            <tr>
                <td>{:lang('job')}</td>
                <td> {{posname}}</td>
            </tr>
            <tr>
                <td style="vertical-align:top;padding:1em">{:lang('job_permission')}<span class="required"></span></td>
                <td>
                    <div class="row">
                        <div class="col-md-12">
                            <ul class="nav nav-tabs">
                                <li :class="{'active':index==0}" v-for="(menuitem,index) in menu">
                                    <a :href="'#'+menuitem.key" data-toggle="tab">{{menuitem.name}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-content" style="height: 150px;overflow: auto;">
                    <div class="cat_panel" :class="{'tab-pane':true,'active':index==0,'over':true}" :id="menuitem.key"
                         v-for="(menuitem,index) in menu">
                        <table class="table table-hover ntTable">
                                <colgroup>
                                    <col width="100">
                                    <col width="150">
                                  </colgroup>
                            <tbody>
                            <tr v-for="(child,key) in menuitem.child" v-if="child.is_show">
                                <td><input type="checkbox" @click="checkfun(key,child.level,index)" :value="child.id"
                                           :checked="child.is_choose"></td>
                                <td>
                                    <a href="javascropt:;" @click="toggle(index,key)"
                                       v-if="child.toggle && child.is_toggle"><span class="glyphicon glyphicon-minus"
                                                                                      style="margin-right:0"></span></a>
                                    <a href="javascropt:;" @click="toggle(index,key)"
                                       v-if="child.toggle && !child.is_toggle"><span class="glyphicon glyphicon-plus"
                                                                                       style="margin-right:0"></span></a>
                                </td>
                                <td :style="{'padding-left':child.level*4+'em','text-align':'left'}"><span
                                        class="fa fa-sitemap"></span>{{child.name}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                </td>
            </tr>

            </tbody>
        </table>
        <input type="hidden" id="act" value="{$str}">
        <input type="hidden" id="did" value="{$id|default=''}">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>{:lang('cancel')}
        </button>
        <button type="button" class="btn btn-primary" @click="savefun" style="padding-left:24px;padding-right:24px">
            <span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}
        </button>
    </div>
</div>
<script>
    new Vue({
        el: '#main',
        data: {
            menu: [],
            choose: [],
            repeat: true,
            posname: '',//职务名称
            framname: '',
            nickname: '',
        },
        mounted(){
            $.ajax({
                url: '/admin/organization/persetroot',
                data: {
                    getroot: '',
                    id: $('#did').val()
                },
                type: 'post',
                success: (data) => {
                    data = JSON.parse(data)
                    this.posname = data.posname
                    this.nickname = data.nickname
                    this.framname = data.framname
                    if (data.auth_ids)
                        this.choose = data.auth_ids.split(',')
                    data.menu.forEach((element, index) => {
                        this.menu.push({    //取出主菜单
                            name: element.langname,
                            key: element.mkey,
                            child: []
                        })
                        this.parsing(element, index, 0)
                    });
                }
            })
            $(document).keydown((event) => {
                if (event.keyCode == 13) {
                    this.savefun()
                }
            });
        },
        methods: {
            parsing(data, index, level){
                if (data.child) {
                    data.child.forEach(element => {
                        var data={
                            is_choose: this.choose.indexOf(element.id.toString()) != -1,
                            id: element.id,
                            name: element.langname,
                            is_show: level + 1 >= 2 ? false : true,
                            is_toggle: false,
                            level: level + 1
                        }
                        if (element.child) {
                            data.toggle=true
                        }
                        this.menu[index].child.push(data)
                        if (element.child) {
                            this.parsing(element, index, level + 1)
                        }
                    });
                }
            },
            checkfun(did, level, index){
                if (this.choose.indexOf(this.menu[index].child[did].id.toString()) == -1) {
                    this.choose.push(this.menu[index].child[did].id.toString())
                } else {
                    this.choose.splice(this.choose.indexOf(this.menu[index].child[did].id.toString()), 1)
                }
                if (level == 1) {
                    for (var i = did + 1; i < this.menu[index].child.length; i++) {
                        if (this.menu[index].child[i].level > 1) {
                            if (this.choose.indexOf(this.menu[index].child[did].id.toString()) == -1) {
                                this.menu[index].child[i].is_choose = false
                                if (this.choose.indexOf(this.menu[index].child[i].id.toString()) != -1)
                                    this.choose.splice(this.choose.indexOf(this.menu[index].child[i].id.toString()), 1)
                            } else {
                                this.menu[index].child[i].is_choose = true
                                this.choose.push(this.menu[index].child[i].id.toString())
                            }
                        } else {
                            break;
                        }
                    }
                }
            },
            savefun(){
                if (this.repeat) {
                    $.ajax({
                        url: '/admin/organization/persetroot',
                        type: 'post',
                        data: {
                            id: $('#did').val(),
                            nickname: this.nickname,
                            auth_ids: this.choose,
                            act: $('#act').val()
                        },
                        success: (data) => {
                            data = JSON.parse(data)
                            if(data.status != 1){
                                change_mes_type('.modal-body .alert',data.status)
                                $('.modal-body .alert').show()
                                $('.modal-body .alert p').html('*' + data.msg + '<br>')
                            }else{
                                change_mes_type('.alert',data.status)
                                $('.alert').show()
                                $('.alert p').html(data.msg + '<br>')
                                $('#menu2admin_editModal').modal('hide')
                            }
                        }
                    })
                }
            },
            toggle(index, key){
                this.menu[index].child[key].is_toggle = !this.menu[index].child[key].is_toggle
                for (var i = key + 1; i < this.menu[index].child.length; i++) {
                    if (this.menu[index].child[i].level>this.menu[index].child[key].level) {
                        this.menu[index].child[i].is_show = this.menu[index].child[key].is_toggle
                        this.menu[index].child[i].is_toggle = this.menu[index].child[key].is_toggle
                    } else {
                        break;
                    }
                }
            }
        }
    })
</script>